<template>
  <div class="studentProduct">
    <template>
      <div id="serch_add">
        <el-input placeholder="请输入姓名" v-model="input" clearable> </el-input>
        <el-row>
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            @click="sou_stu"
          ></el-button>
          <el-button type="primary" @click="addStu" v-has="'add'">添加项目</el-button>
        </el-row>
        <el-select
          v-model="classes"
          placeholder="请选择班级"
          @change="classChange"
          @visible-change="classVisible"
        >
          <el-option label="全部" value="all"> </el-option>
          <el-option
            v-for="(item, index) in classLists"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div id="daochu">
        <el-row>
          <el-button type="success" plain @click="DCexcel">导出当前页Excel</el-button>
        </el-row>
      </div>
    </template>
    <template>
      <el-table :data="stuData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="headimgurl" label="头像" width="100" align="center">
          <!-- 使用table定义的插槽 -->
          <template slot-scope="scope">
            <el-avatar shape="square" :size="50" :src="scope.row.headimgurl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="130" align="center">
        </el-table-column>
        <el-table-column prop="degree" label="学历" width="130" align="center">
        </el-table-column>
        <el-table-column prop="class" label="班级" align="center"> </el-table-column>
        <el-table-column prop="productUrl" label="项目" align="center"> </el-table-column>
        <el-table-column prop="cTime" label="创建时间" align="center"> </el-table-column>
        <el-table-column label="操作" align="center">
          <!-- v-slot="{ row }"干嘛的 -->
          <template v-slot="{ row }">
            <el-row>
              <el-button icon="el-icon-search" circle v-has="'read'" @click="Tank(row)"></el-button>
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editStu(row)"
                v-has="'edit'"
              ></el-button>
              <el-button
                type="test"
                icon="el-icon-delete"
                circle
                @click="delateStu(row)"
                v-has="'delete'"
              ></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- dialog弹出框 -->
    <qf-dialog></qf-dialog>
    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="stuTotal"
      :current-page.sync="curPage"
      :page-size="stuPageSize"
      hide-on-single-page
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>
<script>
import * as api from "@/api";
import { mapState, mapActions, mapMutations } from "vuex";
//引入dialog
import dialog from "../../../../components/dialog";
//引入导出excel插件
import qee from "qf-export-excel"
export default {
  computed: {
    ...mapState(["stuData", "loading", "stuTotal", "stuPageSize"]),
  },
  created() {
    //调用方法获取学员数据
    // this.getStuList();
    this.GET_STULIST();
  },
  components: {
    "qf-dialog": dialog,
  },
  watch: {
    //监听input属性
    input() {
      // console.log("input修改了");
      if (this.input == "") {
        this.GET_STULIST();
        this.curPage = 1;
      }
    },
  },
  data() {
    return {
      classes: "",
      classLists: [], //班级列表
      input: "",
      searchList: [], //搜索到的数据
      curPage: 1,
    };
  },
  methods: {
    Tank(row){
      // console.log(row);
      this.$router.push({
        name:"profill",
        params:row
      })
    },
    ...mapActions(["GET_STULIST"]),
    ...mapMutations([
      "SHOW_EDIALOG",
      "CHANGE_EDIALOG_TITLE",
      "SET_CURRENT_ROW",
      "SET_STU_DATA",
    ]),
    DCexcel(){//导出excel
      //设置表头
      let titleList = [
        {
        title:"头像地址",
        key:"headimgurl"
        },
        {
        title:"名字",
        key:"name"
        },
        {
        title:"创建时间",
        key:"cTime"
        },
      ]
      //设置表头对应列 每一行的数据
      let dataSource = []
      this.stuData.forEach(item => {
        let objj = {
          headimgurl:item.headimgurl,
          name:item.name,
          cTime:item.cTime
        }
        dataSource.push(objj)
      });
      //设置导出文件名
      let fileName = "Alice"
      qee(titleList,dataSource,fileName)
    },
    // //获取学员表格数据
    // getStuList(params = { count: 10, page: 1, classes: "" }) {
    //   api.getStuListApi().then((res) => {
    //     //得到数据后关闭加载框
    //     this.loading = false;
    //     console.log(res.data.data);
    //     this.tableData = res.data.data;
    //   });
    // },
    changePage(page) {
      //判断搜索框里是不是有值，有就展示搜索的分页结果
      if (this.input) {
        api.searchStuApi(page, this.input, "").then((res) => {
          this.SET_STU_DATA(res.data);
        });
      } else {
        console.log(page);
        //页码变更重新获取学员数据信息
        this.GET_STULIST({ page });
      }
    },
    addStu() {
      //添加学员信息
      //同时修改弹框标题
      this.CHANGE_EDIALOG_TITLE("增加学员信息");
      //点击添加的时候打开添加的表单控件
      this.SHOW_EDIALOG();
    },
    editStu(row) {
      //编辑学员信息
      //同时修改弹框标题
      this.CHANGE_EDIALOG_TITLE("编辑学员信息");
      this.SHOW_EDIALOG();
      //将当前这行数据传给回显数据对象
      this.SET_CURRENT_ROW(row);
    },
    delateStu(row) {
      //删除学员信息
      // console.log(row);
      this.$confirm("你在删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteStuApi(row.sId).then((res) => {
            if (res.data.state) {
              this.GET_STULIST();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error("数据不存在或没做任何修改");
              this.GET_STULIST();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //选择班级时触发
    classChange(query) {
      // console.log(query);
      //调用GET_STULIST传班级
      if (query === "all") {
        query = "";
      }
      this.GET_STULIST({ classes: query });
    },
    //选择班级展开/收起触发
    classVisible(isVisible) {
      // console.log(isVisible);
      if (isVisible) {
        api.getSelectClassApi().then((res) => {
          // console.log(res);
          this.classLists = res.data.data;
        });
      }
    },
    sou_stu() {
      //拿到搜索框的内容 请求搜索接口 传参
      if (this.input == "") {
        this.$message.error("搜索内容不能为空");
      } else {
        //每次所有的时候页码先归1 防bug
        this.curPage = 1;
        // console.log(this.input);
        api.searchStuApi("", this.input, "").then((res) => {
          console.log(res);
          //把要传的搜索名字直接给映射进来的SET_STU_DATA修改stuData
          this.SET_STU_DATA(res.data);
        });
      }
    },
  },
};
</script>
<style scoped lang="less">
#serch_add {
  height: 100px;
  width: 380px;
  text-align: none;
  position: relative;
  margin: 50px 0;
  .el-input {
    width: 215px;
    position: absolute;
    left: 0;
    top: 0;
  }
  .el-row {
    position: absolute;
    right: 0;
    top: 0;
  }
  .el-select {
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
// #daochu{
//   .el-row{
//     .el-button--success{
//       position:relative;
//       right:386px;
//       margin-bottom:5px;
//     }
//   }
// }
.is-circleis-disabled,.el-button--primaryis-disabled{
  background-color:gray !important;
  color:black !important;
}
</style>
